<script setup>
import { onMounted, useTemplateRef } from 'vue'

/** 暴露函数 */

defineExpose({
  removeAnimate,
  addAnimate,
})

/** 动画 */

const ani001 = useTemplateRef('ani-001')
const ani002 = useTemplateRef('ani-002')
const ani003 = useTemplateRef('ani-003')

function removeAnimate() {
  // 移除所有动画类
  ani001.value.classList.remove('animate__backInLeft')
  ani002.value.classList.remove('animate__slideInDown')
  ani003.value.classList.remove('animate__slideInDown')
}

function addAnimate() {
  // 添加动画类
  // 下一帧重新添加动画类
  requestAnimationFrame(() => {
    ani001.value.classList.add('animate__backInLeft')
    ani002.value.classList.add('animate__slideInDown')
    ani003.value.classList.add('animate__slideInDown')
  })
}

function initMap() {
  // 百度地图API功能
  var map = new BMapGL.Map('allmap')
  var point = new BMapGL.Point(104.067309, 30.598149)
  map.centerAndZoom(point, 18)
  map.enableScrollWheelZoom(true)

  var marker = new BMapGL.Marker(new BMapGL.Point(104.067309, 30.598149)) // 创建点

  var opts = {
    position: new BMapGL.Point(104.067309, 30.598149), // 指定文本标注所在的地理位置
    offset: new BMapGL.Size(-30, 10), // 设置文本偏移量
  }
  // 创建文本标注对象
  var label = new BMapGL.Label('软件大楼1211', opts)

  // 添加覆盖物
  map.addOverlay(marker) // 增加点
  map.addOverlay(label) // 增加文本标注
}

onMounted(() => {
  initMap()
})
</script>
<template>
  <div class="box">
    <p class="title animate__animated" ref="ani-001">『书法社』</p>
    <div id="allmap" class="animate__animated" ref="ani-002"></div>
    <dl class="info animate__animated" ref="ani-003">
      <dt>招新时间</dt>
      <dd>2025.05.06-05.09&nbsp;&nbsp;&nbsp;&nbsp;10:00-13:00</dd>
      <hr />
      <dt>招新地点</dt>
      <dd>成都职业技术学院(高新校区) - 软件大楼1211</dd>
    </dl>
  </div>
</template>
<style scoped>
.box {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.box .title {
  font-family: 'wangxizhi';
  font-size: 1rem;
  font-weight: bold;
  margin: 0.5rem;
}

.box #allmap {
  width: 100%;
  height: 50%;
  background-color: pink;
  overflow: hidden;
}

.box .info {
  width: 90%;
  padding: 5%;
  margin-top: 0.5rem;
  background-color: #fff;
  border-radius: 0.1rem;

  -webkit-mask-image: radial-gradient(circle at 0.3rem 50%, transparent 0.3rem, red 0.3rem);
  -webkit-mask-position: -0.3rem;
}

.box .info dt {
  font-weight: 900;
  font-size: 0.4rem;
}

.box .info dd {
  font-size: 0.3rem;
  margin: 0.2rem 0;
}

.box .info dt:last-of-type {
  margin-top: 0.2rem;
}

.box .info dd:last-of-type {
  margin-bottom: 0;
}

.box .info hr {
  border: none;
  border-top: 1px dashed #999;
}
</style>
